<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      title="批量上传提示"
      width="500"
      :before-close="handleClose"
    >
      <div class="container">
        <span>批量上传需要使用预设文件模板，如未下载模板请先点击<el-button
            link
            style="color: #44BD60;"
            @click="downloadTemplate"
          >下载模板</el-button>进行信息录入后再次上传。</span>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button
            @click="cancelBtn"
            class="cancel-btn"
          >取消</el-button>

          <el-upload
            ref="upload"
            action=""
            :auto-upload="false"
            :show-file-list="false"
            accept=".xlsx, .xls"
            :on-change="handleFileChange"
            class="confirm-btn"
          >
            继续上传
          </el-upload>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, defineEmits } from 'vue'
const emits = defineEmits(['download', 'batchUpload'])

const dialogVisible = ref(false)

// 取消的方法
function cancelBtn () {
  handleClose()
}

// 确定的方法
function continueUpload () {
}

// 关闭弹窗的方法
function handleClose () {
  dialogVisible.value = false
}

// 下载模板的方法
function downloadTemplate () {
  emits('download')
  handleClose()
}

// 批量上传的文件
function handleFileChange (file) {
  // dialogVisible.value = false
  emits('batchUpload', file)
}


defineExpose({
  dialogVisible
})


</script>

<style lang='scss' scoped>
.container {
  // padding: 0 32px;
  font-size: 14px;
  color: #363636;
}

.dialog-footer {
  display: flex;
  justify-content: end;
  .cancel-btn {
    width: 108px;
    height: 40px;
    border-radius: 6px 6px 6px 6px;
    border: 1px solid #5974ff;
    font-size: 16px;
    color: #5974ff;
    &:hover {
      background-color: transparent;
    }
    &:focus {
      background-color: transparent;
    }
  }
  .confirm-btn {
    width: 108px;
    height: 40px;
    background: #5974ff;
    border-radius: 6px 6px 6px 6px;
    font-size: 16px;
    color: #ffffff;
    border: 1px solid #5974ff;
    margin-left: 15px;
    cursor: pointer;
    &:focus {
      color: #fff !important;
    }
    ::v-deep(.el-upload) {
      width: 108px;
    }
  }
}

// 模态框居中显示
::v-deep(.el-dialog:not(.is-fullscreen)) {
  margin: auto !important;
}

::v-deep(.el-dialog__footer) {
  text-align: center !important;
  line-height: 35px;
}
</style>
